<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>age 值：{{ $store.state.age }}</p>
    <p>count 值：{{ $store.state.count }}</p>
    <p>{{ $store.state.cartList }}</p>
    <p>总价：{{ $store.getters.totalPrice }}</p>
    <button @click="fn1" class="btn btn-primary">+1</button>
    <button @click="fn2" class="btn btn-primary">+5</button>
  </div>
</template>

<script>
export default {
  name: 'Left',
  methods: {
    fn1 () {
      // 不推荐直接修改state里的数据
      // 原因1：浏览器的调试工具无法追踪到变化，不利于调试
      // 原因2：严格模式下会报错。 在vuex里写一个strict:true就是开启严格模式
      // this.$store.state.count++

      // 调用mutations里的方法来修改
      this.$store.commit('addCount')
    },
    fn2 () {
      this.$store.commit('addWithNum', 5)

      this.$store.commit('test', {
        num1: 5,
        num2: 10
      })
    }
  }
}
</script>

<style>
</style>
